<template>
  <div>
    <Map></Map>

    <template v-for="target in targets">
      <Target :x="target.x" :y="target.y" />
    </template>

    <template v-for="cargo in cargos" :key="cargo.id">
      <Cargo :cargo="cargo" />
    </template>

    <Player></Player>
  </div>

  <div v-show="game.isGameCompleted" class="next-level-btn">
    <button @click="toNextLevel">下一关</button>
  </div>
</template>

<script lang="ts" setup>
import { useCargoStore } from '@/stores/cargo';
import Cargo from '@/components/game/Cargo.vue';
import Map from '@/components/game/Map.vue';
import Player from '@/components/game/Player.vue';
import Target from '@/components/game/Target.vue';
import { useTargetStore } from '@/stores/target';
import { useGameStore } from '@/stores/game';
import { levelGameInfo } from '@/game/levelGameInfo';

// 设置目标点
const { targets } = useTargetStore();

// 添加箱子
const { cargos } = useCargoStore();

const { game, toNextLevel, setupGameInfo } = useGameStore();

setupGameInfo(levelGameInfo);
</script>

<style lang="scss" scoped>
.next-level-btn {
  width: 500px;
  text-align: center;
  margin-top: 20px;
  font-size: 16px;

  button {
    background-color: red;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
  }
}
</style>
